<template>
    <div id="son1">
        <div class="name">
            <span>{{ iname }}</span>
        </div>
        <div class="showlist">
            <span>今天是{{ comput1 }}</span>
        </div>
        <div class="showlist">
            <span>{{ name + ';' }}</span>
            <span>{{ age + ';' }}</span>
            <span>{{ adress }}</span>
        </div>
    </div>
</template>

<script>
import { ref, computed, toRefs, onMounted } from 'vue';
import { userFeature } from '../utils/useFeatureX';
export default {
    setup() {
        const iname = ref('son1子组件');
        const comput1 = computed(() => `${new Date().getDate()}号`);
        const state = userFeature();
        onMounted(() => {
            console.log(toRefs(state), '*********');
        });
        return {
            iname,
            comput1,
            //使用 toRefs 将reactiv包裹的响应式对象转换为普通对象，其中的每个属性都是一个ref包裹的响应式单值
            // 再使用...展开这个转换后的对象，作用相当于写了多个ref单值然后再返回
            ...toRefs(state),
        }
    }
}
</script>
<style lang="scss">
    #son1{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid red;
        width: 400px;
        min-height: 100px;
        cursor: pointer;
        .name{
            background: palevioletred;
        }
    }
</style>